<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>留言与通知</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <style>
      body { font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif; background: #121212; }
      .main-card {
        background: linear-gradient(120deg, #23272f 60%, #23233b 100%);
        border-radius: 18px;
        box-shadow: 0 4px 18px #00f2ea22;
        margin-bottom: 28px;
        padding: 24px 18px;
        border: 1.5px solid #232323;
        position: relative;
        overflow: hidden;
        margin-left: 10px;
        margin-right: 10px;
      }
      .main-card::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, #FE2C55 0%, #00F2EA 100%);
        border-radius: 22px 22px 0 0;
        opacity: 0.8;
      }
      .section-title { font-size: 18px; font-weight: 600; color: #FE2C55; margin-bottom: 16px; display: flex; align-items: center; letter-spacing: 1px; }
      .section-title i { margin-right: 8px; color: #FE2C55; }
      .notice-item, .msg-item {
        background: linear-gradient(120deg, #232323 60%, #2A2A2A 100%);
        border-radius: 14px;
        box-shadow: 0 2px 8px #FE2C5522;
        padding: 14px 14px 10px 14px;
        margin-bottom: 12px;
        border: 1.2px solid #232323;
      }
      .notice-title { color: #00F2EA; font-weight: 600; }
      .notice-time, .msg-time { color: #E6E6E6; font-size: 12px; margin-top: 2px; }
      .msg-user { font-weight: bold; margin-right: 6px; }
      .msg-user.blue { color: #00F2EA; }
      .msg-user.pink { color: #FE2C55; }
      .msg-content { color: #fff; }
      .add-btn { background: linear-gradient(90deg, #FE2C55 60%, #00F2EA 100%); color: #fff; border: none; border-radius: 12px; padding: 10px 0; font-size: 15px; font-weight: 600; width: 100%; margin-top: 8px; box-shadow: 0 2px 8px #FE2C5533; transition: background 0.2s; }
      .add-btn:active { background: linear-gradient(90deg, #FE2C55 80%, #00F2EA 100%); }
      .msg-form { display: flex; margin-top: 10px; }
      .msg-input { flex: 1; border: 1px solid #232323; border-radius: 12px 0 0 12px; padding: 10px 14px; font-size: 15px; background: #2A2A2A; color: #fff; }
      .msg-input::placeholder { color: #E6E6E6; }
      .msg-send { background: #00F2EA; color: #181A20; border: none; border-radius: 0 12px 12px 0; padding: 0 18px; font-size: 18px; transition: background 0.2s; }
      .msg-send:active { background: #FE2C55; color: #fff; }
      .notice-form {
        display: flex;
        margin-top: 10px;
      }
      .notice-input {
        flex: 1;
        border: 1px solid #fe2c55;
        border-radius: 12px 0 0 12px;
        padding: 10px 14px;
        font-size: 15px;
        background: #2A2A2A;
        color: #fff;
      }
      .notice-input::placeholder { color: #E6E6E6; }
      .notice-send {
        background: #fe2c55;
        color: #fff;
        border: none;
        border-radius: 0 12px 12px 0;
        padding: 0 18px;
        font-size: 18px;
        transition: background 0.2s;
      }
      .notice-send:active { background: #00f2ea; color: #181A20; }
      @media (max-width: 520px) {
        .main-card {
          margin-left: 4px;
          margin-right: 4px;
        }
      }
    </style>
    <script>
      function addNotice(e) {
        e.preventDefault();
        const input = document.getElementById('notice-input');
        const text = input.value.trim();
        if (!text) return;
        const now = new Date();
        const time = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
        const noticeHtml = `<div class='notice-item'><div class='notice-title'>${text}</div><div class='notice-time'>${time}</div></div>`;
        input.value = '';
        input.blur();
        // 插入到第一个通知前
        const first = document.querySelector('.notice-item');
        if (first) first.insertAdjacentHTML('beforebegin', noticeHtml);
      }
    </script>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-6">
      <div class="main-card mb-6">
        <div class="section-title"><i class="fa fa-bell"></i>通知中心</div>
        <div class="notice-item">
          <div class="notice-title">今晚8点厨房消毒，请提前取餐！</div>
          <div class="notice-time">2025-04-29 10:00</div>
        </div>
        <div class="notice-item">
          <div class="notice-title">本周六有家庭聚餐，欢迎大家提前点菜！</div>
          <div class="notice-time">2025-04-28 09:00</div>
        </div>
        <form class="notice-form" onsubmit="addNotice(event)">
          <input
            class="notice-input"
            id="notice-input"
            placeholder="新增通知内容（回车或点击右侧发送）"
            maxlength="40"
            required
          />
          <button class="notice-send" type="submit">
            <i class="fa fa-paper-plane"></i>
          </button>
        </form>
      </div>
      <div class="main-card">
        <div class="section-title">
          <i class="fa fa-comment-dots"></i>家庭留言
        </div>
        <div class="msg-item">
          <div class="flex items-center mb-1">
            <span class="msg-user blue">爸爸</span
            ><span class="msg-content">明天能不能加个鱼香肉丝？</span>
          </div>
          <div class="msg-time">2025-04-29 09:30</div>
        </div>
        <div class="msg-item">
          <div class="flex items-center mb-1">
            <span class="msg-user pink">妈妈</span
            ><span class="msg-content">今晚早点吃饭哦～</span>
          </div>
          <div class="msg-time">2025-04-28 20:10</div>
        </div>
        <form class="msg-form">
          <input class="msg-input" placeholder="写下你的留言..." />
          <button class="msg-send" type="button">
            <i class="fa fa-paper-plane"></i>
          </button>
        </form>
      </div>
    </div>
  </body>
</html>
